<template>
    <div class="menus">
        <ul class="menus-ul">
         <li v-for="(item,index) in headerList" :key="index">
                <a class="font " @click="jumpPage(index)" :class="{active:changeColor==index}">{{item.title}}</a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'SiteMenus',
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      headerList: [
        { title: '首页' },
        { title: '组织机构' },
        { title: '政策法规' },
        { title: '资金监督' },
        { title: '项目监督' },
        { title: '专项监督' },
        { title: '审查调查' },
        { title: '投诉举报' }
      ],
      changeColor: 0
    }
  },
  methods: {
    jumpPage (index) {
      if (index === 0) {
        this.$router.push({
          name: 'siteHome',
          query: { index: index }
        })
      } else if (index === 1) {
        this.$router.push({
          name: 'LeadingGroup',
          query: { index: index }
        })
      } else if (index === 2) {
        this.$router.push({
          name: 'Policy',
          query: { index: index }
        })
      } else if (index === 3) {
        this.$router.push({
          name: 'Capital',
          query: { index: index }
        })
      } else if (index === 4) {
        this.$router.push({
          name: 'FundSupervision',
          query: { index: index }
        })
      } else if (index === 5) {
        this.$router.push({
          name: 'BusSupervision',
          query: { index: index }
        })
      } else if (index === 6) {
        this.$router.push({
          name: 'Examination',
          query: { index: index }
        })
      } else if (index === 7) {
        this.$router.push({
          name: 'ComplaintsReport',
          query: { index: index }
        })
      }
    },
    result () {
      this.$emit('result', 11)
    }
  },
  mounted () {

  }
}
</script>

<style scoped>
    .menus{
        margin:0 auto;
        height: 65px;
        background-image: url('../../../../../../assets/images/bd-bule.png');
    }
    .menus-ul{
        margin-left: 20px;
        list-style-type: none;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }
    .menus-ul li{
        position: relative;
        width: 12%;
        font-size: 20px;
        text-align: center;
        line-height: 65px;
        float: left;
    }
    .font{
        color: #fff;
    }
    .active::after{
        position: absolute;
        left: 0;
        content: '';
        top: auto;
        bottom: 0;
        width: 100%;
        height: 3px;
        background-color: #ff9200;
    }
</style>
